<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>

	<!--
    <script src="/socket.io/socket.io.js"></script>    
    -->
    <script src="src/base.js"></script>
    <script src="src/entity.js"></script>
    <script src="src/graphics.js"></script>
    <script src="src/stage.js"></script>
    <!--
    <script src="src/network.js"></script>
    -->
    <script src="src/offline.js"></script>
    <script src="src/thread.js"></script>

    <div>
   		<div id=app></div>
        <div><p>FPS: <h3 id="fps"></h3></p></div>
    </div>
    
    
   	<p>Use wasd to move circle around. (mouse must be hoverig canvas)</p>
    <p>
        Press b to toggle blur.<br>
        <input type="range" value="2" min="1" max="10" step="1" id="blurAmount" 
        	onChange="document.getElementById('baview').innerText = 'Blur Amount: ' + document.getElementById('blurAmount').value" 
        /> 
        <label for="#blurAmount"id="baview" >Blur Amount: 2</label>
        <br>
        <input type="checkbox" id='quadratic'/> 
        <label for="#quadratic" id="quadraticv" >Quadratic Blur? (uses some other matrix)</label>
    </p>
    <p>
        Press i to invert image.<br>
    </p>
     <p>
        Press c to sharpen image.<br>
        <input type="range" value="2" min="1" max="10" step="1" id="sharpenAmount" 
        	onChange="document.getElementById('sview').innerText = 'Sharpen Amount: ' + document.getElementById('sharpenAmount').value" 
        /> 
        <label for="#sharpenAmount"id="sview" >Sharpen Amount: 2</label>
    </p>

    <style>canvas { border: 1px solid lightgrey; }</style>

    <script>
		var fps = Util().FPS;
		fps.on('fps', function(type, e){document.getElementById('fps').innerHTML = e.fps;} );
	
	

        s = new Stage(256, 256, document.querySelector("#app"));
        r = new Rectangle(20, 20);
        r.setFillColor("#f00");
		
        //n = new Network();

        c = new Circle(15);
        c.x += 25;
        c.y += 25;
        c.setFillColor("#0f0");
		
        camera = new EntityGroup();
        camera.addEntity(r);
        camera.addEntity(c);		
		
        s.addEntity(camera);

        loop = function(){
			fps.update();
			
            s.draw();
			s.filter();
            s.update();
            requestAnimationFrame(loop);
        }
        loop();

    </script>
    <script>

        
		var amount = 200;
		var width = 256;
		var height = 256;
		var offset = 15;
		
		while(amount--){
			var circle = new Circle(Math.random()*8);
			circle.x = Math.max(offset, Math.min(width  - offset, Math.random()*width));
			circle.y = Math.max(offset, Math.min(height - offset, Math.random()*width));
			circle.z = Math.random()*100;
			circle.setFillColor(Color({random:[20,0]},{set:[0,127,255]},255));
			
			camera.addEntity(circle);
		}
		

		var entity = c;
		var handler = function (type, e){
			var pressed = e.targetObject.keys.pressed;
			var l = pressed.length;
			while(l--){
				switch (pressed[l].charValue){
					case 'w':
						entity.y -= 3;
						break;
					case 's':
						entity.y += 3;
						break;
					case 'a':
						entity.x -= 3;
						break;
					case 'd':
						entity.x += 3;
						break;	
				}
			}
			
		}
		
		var Keys = Util(s.canvas);
		Keys.key('w').on('keydown',handler);
		Keys.key('s').on('keydown',handler);
		Keys.key('a').on('keydown',handler);
		Keys.key('d').on('keydown',handler);
		
		
		
		var blurFilter = new BlurFilter({amount:2, quadratic:false});
		Keys.key('b').on('keydown',function(type,e){
			s.graphics.removeFilter(blurFilter);	
			blurFilter = new BlurFilter({amount:document.getElementById('blurAmount').value, quadratic:document.getElementById('quadratic').checked});	
			s.graphics.addFilter(blurFilter);
		})
		Keys.key('b').on('keyup',function(type,e){
			s.graphics.removeFilter(blurFilter);
		})
		
		var sharpenFilter = new SharpenFilter({amount:2});
		Keys.key('c').on('keydown',function(type,e){
			s.graphics.removeFilter(sharpenFilter);	
			sharpenFilter = new SharpenFilter({amount:document.getElementById('sharpenAmount').value});	
			s.graphics.addFilter(sharpenFilter);
		})
		Keys.key('c').on('keyup',function(type,e){
			s.graphics.removeFilter(sharpenFilter);
		})
		
		
		var invertFilter = new InvertFilter();
		Keys.key('i').on('keydown',function(type,e){
			s.graphics.removeFilter(invertFilter);
			s.graphics.addFilter(invertFilter);
		})
		Keys.key('i').on('keyup',function(type,e){
			s.graphics.removeFilter(invertFilter);
		})
		



		
    </script>
</body>
</html>